<template>
  <div>
    <div id="bigBox11">
      <el-container>
        <el-tabs type="border-card" v-model="a">
          <el-tab-pane
            label="管理员信息"
            name="Admin"
            tabindex="0"
            class="el-tabs__item is-top is-active"
            aria-selected="true"
          >
            <div>
              <div>
                <el-row type="flex" class="row-bg" justify="center">
                  <el-col :span="6"
                    ><div class="grid-content bg-purple right">
                      姓名
                    </div></el-col
                  >
                  <el-col :span="6"
                    ><div class="grid-content left">xxx</div>
                  </el-col>
                  <el-col :span="6"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row type="flex" class="row-bg" justify="center">
                  <el-col :span="6"
                    ><div class="grid-content bg-purple right">
                      证件类型
                    </div></el-col
                  >
                  <el-col :span="6"
                    ><div class="grid-content left">身份证</div>
                  </el-col>
                  <el-col :span="6"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row type="flex" class="row-bg" justify="center">
                  <el-col :span="6"
                    ><div class="grid-content bg-purple right">
                      证件号码
                    </div></el-col
                  >
                  <el-col :span="6"
                    ><div class="grid-content left">xxx</div>
                  </el-col>
                  <el-col :span="6"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row type="flex" class="row-bg" justify="center">
                  <el-col :span="6"
                    ><div class="grid-content bg-purple right">
                      登录账号
                    </div></el-col
                  >
                  <el-col :span="6"
                    ><div class="grid-content left">xxxxxxx</div>
                  </el-col>
                  <el-col :span="6"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row type="flex" class="row-bg" justify="center">
                  <el-col :span="6"
                    ><div class="grid-content bg-purple right">
                      手机号码
                    </div></el-col
                  >
                  <el-col :span="6"
                    ><div class="grid-content left">
                      <input
                        type="text"
                        value="10086"
                        v-model="phone"
                        @blur="phoneTest()"
                      />
                      <p>{{ phoneIns }}</p>
                    </div>
                  </el-col>
                  <el-col :span="6"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <el-row type="flex" class="row-bg" justify="center">
                  <el-col :span="6"
                    ><div class="grid-content bg-purple right">
                      电子邮箱
                    </div></el-col
                  >
                  <el-col :span="6"
                    ><div class="grid-content left">
                      <input
                        type="text"
                        value="xxx"
                        v-model="mail"
                        @blur="mailTest()"
                      />
                      <p>{{ mailIns }}</p>
                    </div>
                  </el-col>
                  <el-col :span="6"
                    ><div class="grid-content bg-purple"></div
                  ></el-col>
                </el-row>
                <div id="Bbox">
                  <el-button class="preser" @click="saveInf"
                    >保存信息</el-button
                  >
                </div>
              </div>
            </div>
            <router-link to="" tag="span"></router-link>
          </el-tab-pane>
          <el-tab-pane label="修改密码" name="ChangePass">
            <el-form
              :model="ruleForm"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="10px"
              class="demo-ruleForm"
            >
              <el-form-item label="旧密码" prop="oldPass">
                <el-input
                  type="password"
                  v-model="ruleForm.oldPass"
                  class="oInp"
                ></el-input>
              </el-form-item>
              <el-form-item label="新密码" prop="pass">
                <el-input
                  type="password"
                  v-model="ruleForm.pass"
                  autocomplete="off"
                  class="oInp"
                ></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="checkPass">
                <el-input
                  type="password"
                  v-model="ruleForm.checkPass"
                  autocomplete="off"
                  class="oInp"
                ></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')"
                  >提交</el-button
                >
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-container>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    let validatePass3 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (!value == "登陆时候保存的密码") {
          callback(new Error("请输入密码"));
        }
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      mail: "",
      mailIns: "",
      phone: "",
      phoneIns: "",
      a: "Admin",
      ruleForm: {
        pass: "",
        checkPass: "",
        oldPass: "",
      },
      rules: {
        oldPass: [
          { validator: validatePass3, trigger: "blur" },
          { required: true, message: "请输入正确密码", trigger: "blur" },
        ],

        pass: [
          { validator: validatePass, trigger: "blur" },
          { required: true, message: "请输入密码", trigger: "blur" },
          { pattern: /^\d{6}$/, message: "请输入正确格式" },
        ],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
  methods: {
    phoneTest() {
      console.log(this.phone);

      let reg = /^\d+$|^\d+[.]?\d+$/;
      if (this.phone == "") {
        this.phoneIns = "手机号码不能为空";
      } else if (!reg.test(this.phone)) {
        this.phoneIns = "请输入正确的手机号码";
      } else {
        this.phoneIns = "";
      }
    },
    mailTest() {
      let reg1 = /^\d+$|^\d+[.]?\d+$/;
      if (this.mail == "") {
        this.mailIns = "电子邮件不能为空";
      } else if (!reg1.test(this.mail)) {
        this.mailIns = "请输入正确的电子邮件";
      } else {
        this.mailIns = "";
      }
    },

    saveInf() {
      alert(1);
      this.phoneTest();
      this.mailTest();

      if (this.mailIns == "" && this.phoneIns == "") {
        this.$axios({
          url: "/113/",
          method: "post",
          data: {
            phone: this.phone,
            mail: this.mail,
          },
        }).then((res2) => {
          console.log(res2);
        });
      }
    },
    submitForm(formName) {
      if (this.ruleForm.oldPass == "登陆时候保存的密码") {
      } else {
        alert("您输入的旧密码不正确");
      }

      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios({
            url: /123/,
            method: "post",
            data: {
              password: this.ruleForm.pass,
            },
          }).then((res) => {
            console.log(res);
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-button {
  margin-left: 400px !important;
}
/deep/.el-form-item__error {
  margin-left: 400px !important;
}
/deep/.el-form-item__label {
  width: 400px !important;
}
.oInp {
  height: 15px;
  width: 300px;
}
#bigBox {
  width: 1200px;
  height: 1000px;
}

#Bbox {
  margin-left: 500px;
}
.right {
  text-align: right;
  color: rgb(154, 154, 154);
}
.left {
  text-align: left;
  margin-left: 30px;
  color: rgb(232, 232, 232);
  input {
    width: 330px;
    height: 35px;
    margin-top: -6px;
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
// .bg-purple-dark {
//   background: #99a9bf;
// }
// .bg-purple {
//   background: #d3dce6;
// }
// .bg-purple-light {
//   background: #e5e9f2;
// }
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  // background-color: #f9fafc;
}
</style>
<style lang="less">
#bigBox11 {
  .el-tabs {
    width: 100%;
    #pane-Admin {
      width: 100%;
    }
  }
}
</style>